<template>
  <el-dialog
  title="分配角色"
  :visible.sync="dialogVisible"
  :before-close="cancel"
  width="50%">
  <el-checkbox-group :value="checkId" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id" @change="change(item.id)">{{ item.name }}</el-checkbox>
  </el-checkbox-group>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
</el-dialog>
</template>



<script>
import {getTrueRole,getDetailRole} from '@/api/role'
import {assignRole} from '@/api/employee'
export default {
  props:{
    dialogVisible:{
      type:Boolean,
      default:false
    },
    checkId:{
      type:Array,
      default:[]
    },
    roleId:{
      default:null
    }
  },
  data() {
    return {
      checkList:[],
      check:[]
    }
  },
  methods:{
    // 取消
    cancel() {
      this.$emit('update:dialogVisible',false)
      this.$emit('update:checkId',[])
    },
    // 确认
    async submit() {
      const data={
        id:this.roleId,
        roleIds:this.checkId
      }
      await assignRole(data)
      this.$message({
        message: '分配角色成功',
        type: 'success'
      });
      this.$emit('update:checkId',[])
      this.$emit('update:dialogVisible',false)
    },
    handleCheckedCitiesChange(list) {
    },
    change(id) {
      let arr=this.checkId
      if(arr.includes(id)) {
        arr=arr.filter(item=>item!=id)
      }
      else {
        arr.push(id)
      }
      this.$emit('update:checkId',arr)
    },
  },
  async created() {
    // 获取已启用的角色
    this.checkList=await getTrueRole()
  }
}
</script>



<style>
</style>